<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="padding: 100px">
<canvas id="cvs" width="900" height="600" style=" border: 1px solid #000;"></canvas>
<script>
    //1 获取标签和上下文
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');

    //2 设置数据
    data = [
        {name:'广州',color:'blue',value:0.2},
        {name:'上海',color:'pink',value:0.25},
        {name:'天津',color:'yellow',value:0.15},
        {name:'北京',color:'green',value:0.25},
        {name:'南京',color:'red',value:0.15}
        ];
    //设置圆心
    var x0 = cvs.width*0.5,y0 = cvs.height*0.5;
    //设置半径
    var r0 = 120;
    //设置起始路径
    var beginL =  -90*Math.PI /180;
    for (var i = 0; i < data.length; i++) {
        //3 绘制扇形
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        //扇形的弧度
        var HD = data[i].value * 2*Math.PI;
        //终点路径
        var endL =beginL + HD;
       //绘制图案
        ctx.arc(x0,y0,r0,beginL,endL,false);
        ctx.fillStyle = data[i].color;
        ctx.fill();
        //更新起始路径
        beginL = endL;
    }






</script>

</body>
</html>